<template>
  <div class="page">
    <div class="box">
      <div class="left">
        <div class="header1">
          <div class="header-title">自动起草通知书</div>
          <!-- <div class="oneWorld">灵感来源、文思涌现</div> -->
        </div>
        <div class="card">
          <!-- 选择模板 -->
          <div class="select-template">
            <div class="select-header">
              <div class="select-header-title">选择模板</div>
              <!-- <div class="nowSelect" @click="drawer = true">
                其他引擎<img src="../assets/right (1).png" />
              </div> -->
            </div>
            <div
              class="template-list"
              v-for="(item, index) in list"
              :key="index"
              @click="dianji(index, item)"
            >
              <div class="item" :class="index == active1 ? 'current' : ''">
                <img v-if="index == active1" src="../assets/select.png" />
                <img v-if="index != active1" src="../assets/noSelect.png" />
                <div class="template-name">
                  {{ item.title }}
                </div>
              </div>
              <!-- <div class="item no">女友道歉</div> -->
            </div>
          </div>
          <div class="line"></div>
          <!-- 填写信息 -->
          <!-- <div class="topic" id="search">
            <div class="title">文章主题</div>
            <input
              id="topic"
              class="input"
              placeholder="想一个有趣的主题,比如小红？"
              v-model="params.topic"
            />
          </div> -->
          <div class="number">
            <div class="title">字数</div>

            <input
              id="number"
              class="input"
              placeholder="预期字数（只能输入数字）"
              v-model.number="params.wordsNumber"
              @input="onInput"
            />
          </div>
          <div class="btn">
            <button @click="onClickGenerateArticlesBtn()">立即起草</button>
          </div>
        </div>
      </div>
      <div class="right">
        <div v-if="showArticle">
          <div class="top-header">
            <div class="topic">{{ topic }}</div>
            <div class="number">
              <div class="">{{ actualNumber }} 字</div>
            </div>
          </div>

          <div class="notic">
            提醒：本文由AI智能审计管理系统生成，仅用与参考学习作用，请勿用于其他用途。
          </div>

          <div class="content">
            <p v-html="text" class="show"></p>
            <!-- <textarea
            v-if="!isEdit"
            class="edit"
            name=""
            id=""
            cols="30"
            maxlength="1000"
            v-model="text"
          >111</textarea> -->
            <!-- <textarea  class="edit" maxlength="-1" 	auto-height model:value="{{article}}" /> -->
          </div>

          <!-- 悬浮按钮 -->
          <div class="add" @click="toHandwriting">
            <img src="../assets/hand.png" />
          </div>
        </div>
        <div v-if="!showArticle" class="empty">
          <img src="../assets/undraw_typewriter_re_u9i2.svg" alt="" />
        </div>
      </div>
    </div>
    <el-drawer
      title="文章引擎列表"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div
        class="detail"
        v-for="(item, index) in templateList"
        :key="index"
        @click="getDetail(item)"
      >
        <image src="../../static/yq.png"></image>
        <div class="content">
          <div class="title">
            {{ item.title }}
          </div>
          <div class="span">示例：{{ item.brief }}</div>
          <div class="import">导入</div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      drawer: false,
      active1: 0,
      text: "",
      actualNumber: 0,
      topic: "",
      showArticle: false,
      params: {
        uid: "",
        temid: 1,
        topic: "",
        wordsNumber: 500,
      },
      // 输入框获得焦点的样式
      isFocus: {
        topic: false,
        number: false,
      },
      // 本地模板列表
      list: [
        {
          title: "模板1",
          id: "1",
        },
        {
          title: "模板2",
          id: "3",
        },
      ],
      // 在线其他模板列表
      templateList: [],
    };
  },
  beforeMount() {
    // this.init();
  },
  methods: {
    init() {
      this.getTemplateList();
      let demo = localStorage.getItem("demo");
      if (demo) {
        this.list = JSON.parse(demo);
      } else {
        localStorage.setItem("demo", JSON.stringify(this.list));
      }
    },
    getDetail(item) {
      console.log(item, this.list);
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].id == item.id) {
          // 已有该id，返回true
          return this.$message({
            message: "此文章引擎已经重复导入过啦，无需重复导入~",
            type: "warning",
          });
        }
      }
      // 没有该id，添加新对象到demo中，并返回false
      this.list.unshift({
        id: item.id,
        title: item.title,
      });
      this.drawer = false;
      localStorage.setItem("demo", JSON.stringify(this.list));
      this.$message({
        message: "文章引擎导入成功~",
        type: "success",
      });
    },
    toHandwriting() {
      window.open(
        `http://aicreation.lipux.cn/hw/#/?article=${encodeURIComponent(
          JSON.stringify(this.text)
        )}`,
        "_blank"
      );
    },
    dianji(index, item) {
      this.active1 = index;
      // console.log(this.active,item);
      this.params.temid = item.id;
      console.log(this.params);
    },
    getTemplateList() {
      this.$axios.post("/getTemplateList").then((res) => {
        if (res.data.code === 200) {
          const list = Array.from(res.data.data);
          list.forEach((item) => {
            item.isClick = false;
          });
          this.templateList = list;
        }
      });
    },
    handleMouseMove(item) {
      item.isClick = true;
    },
    handleMouseleave(item) {
      item.isClick = false;
    },
    handleClickLink(item) {
      this.templateDialogInfo.title = item.title;
      this.templateDialogInfo.temid = item.id;
      this.visible.template = true;
    },
    onClickGenerateArticlesBtn() {
      if(this.params.topic=='' || this.params.wordsNumber == ''){
        return this.$message({
            message: "参数不能为空或格式错误！",
            type: "error",
          });
      }
      const sendInfo = {
        uid: JSON.parse(localStorage.getItem("userInfo")).uid.toString(),
        temid: this.params.temid.toString(),
        topic: this.params.topic,
        wordsNumber: this.params.wordsNumber,
      };

      this.$axios.post("/makeArticle", sendInfo).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: "文章生成成功！",
            type: "success",
          });
          this.showArticle = true;
          this.topic = this.params.topic;
          this.text = res.data.data.article;
          this.actualNumber = res.data.data.actualNumber;
        }
      });
    },
    onInput(event) {
      let value = event.target.value;
      // 替换非数字字符
      value = value.replace(/[^\d.-]/g, '');
      this.params.wordsNumber= value;
    }
  },
};
</script>
<style lang="less" scoped>
.page {
  padding: 20px 20px 0;

  .box {
    display: flex;
    /* 头部 */

    .left {
      flex-shrink: 0;
      width: 48%;
      border-right: 2px dashed #eee;
      .header1 {
        // width: 100%;
        // height: 70px;
        margin: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }

      .header1 .header-title {
        color: rgba(0, 0, 0, 1);
        font-size: 20px;
        font-weight: 700;
      }

      .header1 .oneWorld {
        font-size: 15px;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 4px;
      }
      .card {
        margin: 20px;
      }

      .select-header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
      }

      .select-header-title {
        font-size: 20px;
        margin: 14px 0;
        color: rgba(0, 0, 0, 1);
        font-weight: 600;
      }

      .nowSelect {
        cursor: pointer;
        display: flex;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.45);
      }

      .nowSelect img {
        width: 21px;
        height: 21px;
      }

      .title {
        font-size: 20px;
        margin: 15px 0;
        color: rgba(0, 0, 0, 1);
        font-weight: 600;
      }

      .template-list {
        display: inline-block;
        /* height: 0; */
        transition: all 0.2s;
        overflow: hidden;
      }

      .template-list .item {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 15px 20px;
        border-radius: 10px;
        background-color: #2a82e447;
        color: #6eb0f0;
        // border: 2px solid rgba(0, 0, 0, 0.06);
        margin-right: 10px;
        // display: inline-block;
        font-size: 15px;
        margin: 5px 10px 10px 0;
        transition: all 0.2s;
      }
      .template-name {
        margin-top: 10px;
      }
      .template-list img {
        width: 30px;
        height: 30px;
      }

      .current {
        background-color: #2a82e4 !important;
        color: #fff !important;
        box-shadow: #2a82e445 0px 8px 24px;
        /* background-color: #1459f1d6 !important; */
        // border: 2px solid #2a82e4 !important;
      }

      .input {
        width: 100%;
        padding: 16px;
        border-radius: 15px;
        margin-bottom: 20px;
        background-color: rgba(0, 0, 0, 0.04);
        border: 2px solid rgba(0, 0, 0, 0);
        transition: all 0.2s;
      }

      .input:focus {
        border: 2px solid #2a82e4;
        background-color: #fff;
      }

      .getFocus {
        border: 2px solid #2a82e4;
        background-color: #fff;
      }

      .btn {
        margin: 30px 0 20px 0;
        color: #fff;
        border-radius: 5px;
      }

      .btn button {
        cursor: pointer;
        width: 100%;
        height: 55px;
        line-height: 55px;
        color: #fff;
        font-size: 16px;
        /* background-color: #1459F1; */
        border-radius: 15px;
        background: #2a82e4;
        border: none;
        /* margin-top: 40rpx; */
      }
    }
    .right {
      // flex: 1;
      // width: 100%;
      // padding: 20px;
      .empty {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 50px;
        img {
          width: 70%;
          // height: 100px;
        }
      }
      .notic {
        margin: 15px;
        background-color: #2a82e421;
        color: #2a82e4;
        padding: 15px;
        border-radius: 5px;
        font-size: 15px;
        image {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
      }
      .top-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 70px;
        padding-left: 15px;
        background-color: #fff;
        z-index: 99;
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
      }

      .top-header img {
        width: 23px;
        height: 23px;
        padding: 23px;
        margin-right: 7px;
      }

      .top-header .topic {
        font-size: 17px;
        font-weight: 700;
      }

      .top-header .number {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 3px;
      }

      .header .tools {
        display: flex;
      }

      .tools img {
        width: 20px;
        height: 20px;
        margin-left: 17px;
      }

      .content {
        padding: 15px 20px;
        font-size: 17px;
        // line-height: 1.6;
        // word-spacing: 20px;
        background-color: #fff;
        /* box-shadow: 0 1px 5px rgba(18, 18, 18, 0.1); */
        margin: 15px;
        /* border-radius: 10rpx; */
        /* text-indent: 10rpx; */
        padding-bottom: 50px;
        .show {
          // white-space: pre;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
      }

      .content .edit {
        width: 100%;
        height: 100vh;
        border: none;
        // font-size: 35rpx;
        // line-height: 1.6;
        // word-spacing: 20rpx;
        margin-bottom: 50px;
        /* margin: 30rpx; */
        /* padding-bottom: 100rpx; */
      }

      .add {
        cursor: pointer;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 25px;
        right: 25px;
        height: 50px;
        width: 50px;
        text-align: center;
        /* background-color: #30b89c; */
        border-radius: 50%;
        background: #2a82e4;
        box-shadow: 0px 2px 10px 1px rgba(48, 184, 156, 0.25);
      }

      .add img {
        width: 25px;
        height: 25px;
      }
      .bottom-tools {
        width: 100%;
        z-index: 9999;
        display: flex;
        // position: fixed;
        // bottom: 0;
        background-color: #fff;
        height: 50px;
        padding-left: 15px;
        box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);
      }

      .tools-item {
        width: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .tools-item img {
        width: 23px;
        height: 23rpx;
      }
    }
  }
  .detail {
    display: flex;
    border: 1px solid #e4e4e4;
    margin: 10px;
    border-radius: 5px;
    padding: 15px 10px;
    image {
      width: 30px;
      height: 35px;
      // margin: 0 15px;
    }

    .content {
      flex: 1;
      margin-left: 10px;
    }

    .title {
      font-size: 17px;
      font-weight: 600;
    }

    .span {
      // display: inline-block;
      background-color: #2a82e421;
      padding: 15px;
      margin: 10px 10px 10px 0;
      border-radius: 5px;
      font-size: 15px;
      color: #2a82e4;
    }
    .import {
      cursor: pointer;
      // display: inline-block;
      border-radius: 5px;
      padding: 10px;
      font-size: 15px;
      background-color: #eee;
      text-align: center;
    }
  }
}
</style>
